<template>
    <div>
        <h1>首页</h1>
        <!-- 设置一个盒子 盒子必须包含 id 和尺寸 -->
        <div id="myEcharts1" style="width: 300px;height: 240px;"></div>
        <div id="myEcharts2" style="width: 300px;height: 240px;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
export default {
    mounted() {
        let myEcharts1 = echarts.init(document.querySelector("#myEcharts1"));
        myEcharts1.setOption({
            title: {
                text: 'dlrblovewhr',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224],
                    type: 'line'
                },
                {
                    data: [120, 123, 264],
                    type: 'bar'
                },
                {
                    // 数据2
                    data: [15, 300, 24, 280, 13, 170, 26],
                    // 类型2
                    type: 'line',
                    smooth: true
                }
            ]
        })

        let myEcharts2 = echarts.init(document.querySelector("#myEcharts2"));
        myEcharts2.setOption({
            title: {
                text: 'dlrblovewhr',
                subtext: 'lyf',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: '成理工程',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '2019' },
                        { value: 735, name: '2024' },
                        { value: 580, name: '2023' },
                        { value: 484, name: '2022' },
                        { value: 300, name: '2021' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    }
}
</script>

<style lang="scss" scoped></style>